<template>
    <div class="jx-content"  id="TaskFile" style="padding:30px 30px">
        <div class="taskTitle">
           {{orderNumberStr}}&nbsp;{{TaskName}}
        </div>
        <!-- 视频上传 -->
        <div style="padding-top:40px;"></div>
<!-- 王天宇 星级评分 html-->
            <div class="d-star-box">
                <span style="font-size:16px;">设置实验难度：</span>
                <el-rate @change="reqStar" v-model="starValue"></el-rate>
            </div>
<!-- 王天宇 星级评分 html end-->
        <div class="video-empty" v-if="!versionVideo"  >
            <div class="uploadBtns">
                <p><img src="../../../assets/images/upImg.png"/></p>
                <p class="uploadBtns-file">点击上传视频</p>
                <input id="version-files" type="file" @change="putFile">
                <p class="uploadBtns-file">提示：支持Mp4视频上传</p>
            </div>
         </div>
        <div class="video-img" v-else >
        <div class="iconpost" >
                <p class="filename">{{versionVideo}}</p>
                <div class="iconfontlist">
                    <i class=" iconfont icon-bofang1" title="播放视频" @click="playvideo"></i>
                    <i class=" iconfont icon-Group-" @click="deleteVideo" title="删除视频"></i>
                    <i class=" iconfont icon-shangchuan"><input id="versionFile" type="file" title="上传视频" @change="putFile"></i>
                    <i class=" iconfont icon-xiazai" v-if=" versionVideo !='' && flagDown" title="下载视频" @click="downFiles" ></i>
                    <i class=" iconfont icon-xiazai xiaz2" v-if="versionVideo =='' ||  !flagDown"  ></i>
                </div>
            </div>
        </div>
        <div class=" video-img-load">
            上传中<i class="el-icon-loading"></i>
        </div>
        <!-- 视频展示 -->
        <el-dialog :close-on-click-modal="false" title="视频"  :visible.sync="dialogPreviews" width="40%"  class="preview" @close='closeVideoDialog'>
            <!-- <video id="video"  controls  disablePictureInPicture  controlslist="nodownload"  class="videoShow" :src="videoUrl"></video> -->
             <video id="video"    class="video-js vjs-default-skin vjs-big-play-centered" controls  preload="auto" data-setup='{}' width="100%" height="346"  style="object-fit:fill" >
                <source  :src="videoUrl" >
            </video>
        </el-dialog>
        <!-- 手册 -->
        <div class="saveBtn btn-styles">
            <el-radio-group v-model="tabPosition">
                <el-radio-button label="1">实验手册</el-radio-button>
                <el-radio-button label="2">实验目标</el-radio-button>
                <el-radio-button label="3">实验判定</el-radio-button>
            </el-radio-group>
            <div class="fr btnList" v-show="(show || content == '') && tabPosition == 1">
                <!-- <button class="button-style fr" @click="submitFn" v-show="show || content == ''">保存并预览</button>
                <button class="button-style fr upload-btn" style="margin-right: 10px;" @click="" v-show="show || content == ''">
                    Word版上传
                    <input id="upload-file-input" type="file" @change="getFile">
                </button> -->
                <div class="fr right-icon upload-btn">
                    <span class="word-upload">
                        <i class="iconfont icon-tubiaozhizuomoban2"></i>
                        <input id="upload-file-input" type="file" @change="getFile" title="Word上传">
                    </span>
                    <span>
                        <i class="iconfont icon-baocun2" @click="submitFn"></i>
                    </span>
                </div>
            </div>
            <div class="fr right-icon" v-show="(targetShow || TargetContent == '') && tabPosition == 2">
                <i class="iconfont icon-baocun2" style="margin-top:30px; display:block"     @click="submitFn" v-show="targetShow || TargetContent == ''"></i>
                <!-- <button class="button-style fr" @click="submitFn" v-show="targetShow || TargetContent == ''">保存并预览</button> -->
            </div>
            <div class="fr" v-show="(!show && content != '') && tabPosition == 1">
                <!-- <button class="button-style saveBtn" @click="repeatFn">修改</button> -->
                <i class="iconfont icon-icon_edit"  @click="repeatFn"></i>
            </div>
            <div class="fr" v-show="(!targetShow && TargetContent != '') && tabPosition == 2">
                <!-- <button class="button-style saveBtn" @click="repeatFn">修改</button> -->
                <i class="iconfont icon-icon_edit"  @click="repeatFn"></i>
            </div>
             <div class="righs" v-show="tabPosition == 3">

                    <span class="righs-icon">
                        <i class="iconfont icon-baocun2" @click="judgeSave"></i>
                    </span>
                </div>
        </div>
        <div v-show="( show || content == '') && tabPosition == 1" >
            <div class="ediator">
                <mavonEditor id="EnvironmentEdit" ref="Materials" class="ediator-ev"></mavonEditor>
            </div>
        </div>
        <div v-show="(targetShow || TargetContent == '') && tabPosition == 2">
            <div class="ediator">
                <mavonEditor id="EnvironmentGoalEdit" ref="EnvironmentGoal" class="ediator-ev"></mavonEditor>
            </div>
        </div>
        <div v-show="(!show && content != '') && tabPosition == 1">
            <div class="iframse">
                <div class="markdown-body editormd-preview-container" v-html="markHtml"></div>
            </div>
        </div>
        <div v-show="(!targetShow || TargetContent == '') && tabPosition == 2">
            <div class="iframse">
                <div class="markdown-body editormd-preview-container" v-html="TargetMarkHtml"></div>
            </div>
        </div>
         <div v-show="tabPosition == 3">
                    <el-input
                        type="textarea"
                        placeholder="请输入判定脚本"
                        v-model="judge"
                        maxlength="1000"
                        show-word-limit
                        >
                    </el-input>
                    <div class="spance"></div>
                    <el-input
                        type="textarea"
                        placeholder="请输入判定结果，判定脚本的输出结果与判定结果一致，即认为判定通过。如果脚本无输出结果，此处可不填。"
                        v-model="judgerever"
                        maxlength="500"
                        show-word-limit
                        >
                    </el-input>
            </div>

        <!-- 实验环境 -->
        <div class="virtual-position" @click="VirtualLink">
                <img src="./../../../assets/images/virtual_link.png" />
        </div>
        <el-dialog :close-on-click-modal="false" class="dialog-distribution" title="分配镜像" :visible.sync="dialogDistributionFormVisible"  label-width="100px" width="830px">
            <el-form :model="distributionform" ref="distributionform">
                <el-form-item class="is-required" label="实验类型：">
                    <el-radio-group v-model="distributionform.experimentType" @change="experimentTypeChange">
                        <el-radio :label="1">可视化实验</el-radio>
                        <el-radio :label="2">NoteBook实验</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item class="is-required" label="配置类型：" v-if="distributionform.experimentType == 1">
                    <el-radio-group v-model="distributionform.resource">
                        <el-radio :label="1">单节点</el-radio>
                        <el-radio :label="2">集群</el-radio>
                    </el-radio-group>
                </el-form-item>
                <template v-if="distributionform.experimentType == 2">
                    <el-form-item class="config-item">
                        <div class="fl item-config">
                            <el-form-item
                                prop="distributedData.cpuValue"
                                :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }"
                                label="配置："
                                style=" float:left; width:210px;"
                                class="item-cpu">
                                <el-select v-model="distributionform.distributedData.cpuValue" value-key="value" placeholder="CPU上限">
                                    <el-option
                                    v-for="item in distributionform.distributedData.cpuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                prop="distributedData.ramValue"
                                :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }"
                                style="width:110px; float:left; margin-left:10px;">
                                <el-select v-model="distributionform.distributedData.ramValue" placeholder="内存上限">
                                    <el-option
                                    v-for="item in distributionform.distributedData.ramOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form-item>
                    <el-form-item class="is-required" label="镜像：">
                        <el-cascader
                            :options="distributionform.options0"
                            v-model="distributionform.optionsValue0"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                </template>
                <template v-if="distributionform.experimentType == 1">
                    <div class="form-title">{{ distributionform.resource == 1 ? '伪分布' : '主节点'}}</div>
                    <!-- 伪分布 -->
                    <el-form-item class="config-item" v-if="distributionform.resource == 1">
                        <div class="fl item-config">
                            <el-form-item
                                prop="distributedData.cpuValue"
                                :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }"
                                label="配置："
                                style=" float:left; width:210px;"
                                class="item-cpu">
                                <el-select v-model="distributionform.distributedData.cpuValue" value-key="value" placeholder="CPU上限">
                                    <el-option
                                    v-for="item in distributionform.distributedData.cpuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                prop="distributedData.ramValue"
                                :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }"
                                style="width:110px; float:left; margin-left:10px;">
                                <el-select v-model="distributionform.distributedData.ramValue" placeholder="内存上限">
                                    <el-option
                                    v-for="item in distributionform.distributedData.ramOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form-item>
                    <el-form-item class="is-required" label="镜像："v-if="distributionform.resource == 1">
                        <el-cascader
                            :options="distributionform.options0"
                            v-model="distributionform.optionsValue0"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                    <!-- 伪分布end -->
                    <!-- 主节点 -->
                    <el-form-item class="config-item" v-if="distributionform.resource == 2">
                        <div class="fl item-config">
                            <el-form-item
                                prop="nodeMianData.cpuValue"
                                :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }"
                                label="配置："
                                style=" float:left; width:210px;"
                                class="item-cpu">
                                <el-select v-model="distributionform.nodeMianData.cpuValue" value-key="value" placeholder="CPU上限">
                                    <el-option
                                    v-for="item in distributionform.nodeMianData.cpuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                prop="nodeMianData.ramValue"
                                :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }"
                                style="width:110px; float:left; margin-left:10px;">
                                <el-select v-model="distributionform.nodeMianData.ramValue" placeholder="内存上限">
                                    <el-option
                                    v-for="item in distributionform.nodeMianData.ramOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <!-- <el-form-item class="fl item-Gpu" label="GPU">
                            <el-switch
                                v-model="distributionform.nodeMianData.switchValue">
                            </el-switch>
                        </el-form-item> -->
                    </el-form-item>
                    <el-form-item class="is-required" label="镜像："v-if="distributionform.resource == 2">
                        <el-cascader
                            :options="distributionform.options7"
                            v-model="distributionform.optionsValue7"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                    <!-- 伪分布end -->
                    <div class="form-title" v-if="distributionform.resource == 2">从节点</div>
                    <!-- 镜像配置 -->
                    <el-form-item class="config-item" v-if="distributionform.resource == 2">
                        <div class="fl item-config">
                            <el-form-item
                                prop="mirrorConfigData.cpuValue"
                                :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }"
                                label="配置："
                                style=" float:left; width:210px;"
                                class="item-cpu">
                                <el-select v-model="distributionform.mirrorConfigData.cpuValue" value-key="value" placeholder="CPU上限">
                                    <el-option
                                    v-for="item in distributionform.mirrorConfigData.cpuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                prop="mirrorConfigData.ramValue"
                                :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }"
                                style="width:110px; float:left; margin-left:10px;">
                                <el-select v-model="distributionform.mirrorConfigData.ramValue" placeholder="内存上限">
                                    <el-option
                                    v-for="item in distributionform.mirrorConfigData.ramOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <!-- <el-form-item class="fl item-Gpu" label="GPU">
                            <el-switch
                                v-model="distributionform.mirrorConfigData.switchValue">
                            </el-switch>
                        </el-form-item> -->
                    </el-form-item>
                    <!-- 镜像配置 -->
                    <el-form-item v-if="distributionform.resource == 2" label="从节点数：">
                        <div class="virtual-step">
                            <ul>
                                <!-- <li v-for="(item, index) in distributionform.virtualStepList" @click="AddClass(((index+1)*2))" :class="{ active:((index+1)*2) == distributionform.virtualStepCurrent, 'active-disabled': index != 0}">{{item.value}}</li> -->
                                <li v-for="(item, index) in distributionform.virtualStepList" @click="AddClass(((index+1)))" :class="{ active:((index+1)) == distributionform.virtualStepCurrent}">{{item.value}}</li>
                            </ul>
                        </div>
                    </el-form-item>
                    <div class="item-node" v-if="distributionform.resource == 2">
                        <el-form-item class="is-required" label="镜像1：" v-if="distributionform.virtualStepCurrent == 1 || distributionform.virtualStepCurrent == 2 ||distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options1"
                                v-model="distributionform.optionsValue1"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像2：" v-if="distributionform.virtualStepCurrent == 2 || distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options2"
                                v-model="distributionform.optionsValue2"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像3：" v-if="distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options3"
                                v-model="distributionform.optionsValue3"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像4：" v-if="distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options4"
                                v-model="distributionform.optionsValue4"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像5：" v-if="distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options5"
                                v-model="distributionform.optionsValue5"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像6：" v-if="distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options6"
                                v-model="distributionform.optionsValue6"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                    </div>
                </template>
            </el-form>
            <div class="distribution-item" v-if="distributionform.distributionData">
                <div class="jx-course-box">
                    <img :src="distributionform.distributionData.iconUrl" />
                    <span v-text="distributionform.distributionData.imageName"></span>
                </div>
                <div class="jx-course-text" v-text="distributionform.distributionData.description"></div>
                <div class="jx-course-icon" v-if="distributionform.distributionData.gpu">
                    <img src="./../../../assets/images/gpu_icon.png" />
                </div>
                <div class="jx-course-icon" v-if="distributionform.distributionData.notebook">
                    <img src="./../../../assets/images/notebook_icon.png" />
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="DistributionFormSave('distributionform', 1)">保 存</el-button>
                <el-button class="button-style" @click="DistributionFormSave('distributionform', 2)">保存并进入环境</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import videojs from 'video.js'   //视频
    import mavonEditor from "../../../components/mavonEditor";
    export default {
        components: {
            mavonEditor,
        },
        data () {
            return {
// 王天宇 星级评分 data
                starValue:0,
// 王天宇 星级评分 data end
                //章节id
                chapterId:'',
                // tab标记
                tabPosition: 1,
                //markdown内容
                markHtml:'',
                //内容
                content:'',
                TargetContent: '',
                TargetMarkHtml: '',
                //初始高度
                hei:0,
                show:'',
                targetShow: '',
                //章节id
                chapterId:'',
                //分配镜像弹窗
                dialogDistributionFormVisible: false,
                distributionform: {
                    // 类型
                    resource: 1,
                    // 实验类型 1 可视化实验 2 notebook实验
                    experimentType:1,
                    // 伪分布数组
                    distributedData: {
                        // cpu配置
                        cpuOptions: [
                            {
                                value: '1',
                                label: '1核'
                            },
                            {
                                value: '2',
                                label: '2核'
                            },
                            {
                                value: '4',
                                label: '4核'
                            },
                            {
                                value: '6',
                                label: '6核'
                            },
                            {
                                value: '8',
                                label: '8核'
                            },
                            {
                                value: '10',
                                label: '10核'
                            }
                        ],
                        cpuValue: '',
                        ramOptions: [
                            {
                                value: '1',
                                label: '1G'
                            },
                            {
                                value: '2',
                                label: '2G'
                            },
                            {
                                value: '4',
                                label: '4G'
                            },
                            {
                                value: '6',
                                label: '6G'
                            },
                            {
                                value: '8',
                                label: '8G'
                            },
                            {
                                value: '10',
                                label: '10G'
                            },
                            {
                                value: '12',
                                label: '12G'
                            },
                            {
                                value: '14',
                                label: '14G'
                            },
                            {
                                value: '16',
                                label: '16G'
                            },
                            {
                                value: '32',
                                label: '32G'
                            },
                            {
                                value: '48',
                                label: '48G'
                            },
                            {
                                value: '64',
                                label: '64G'
                            }
                        ],
                        ramValue: '',
                        // GPU
                        // switchValue: false
                    },
                    // 镜像配置
                    mirrorConfigData: {
                        // cpu配置
                        cpuOptions: [
                            {
                                value: '1',
                                label: '1核'
                            },
                            {
                                value: '2',
                                label: '2核'
                            },
                            {
                                value: '4',
                                label: '4核'
                            },
                            {
                                value: '6',
                                label: '6核'
                            },
                            {
                                value: '8',
                                label: '8核'
                            },
                            {
                                value: '10',
                                label: '10核'
                            }
                        ],
                        cpuValue: '',
                        ramOptions: [
                            {
                                value: '1',
                                label: '1G'
                            },
                            {
                                value: '2',
                                label: '2G'
                            },
                            {
                                value: '4',
                                label: '4G'
                            },
                            {
                                value: '6',
                                label: '6G'
                            },
                            {
                                value: '8',
                                label: '8G'
                            },
                            {
                                value: '10',
                                label: '10G'
                            },
                            {
                                value: '12',
                                label: '12G'
                            },
                            {
                                value: '14',
                                label: '14G'
                            },
                            {
                                value: '16',
                                label: '16G'
                            },
                            {
                                value: '32',
                                label: '32G'
                            },
                            {
                                value: '48',
                                label: '48G'
                            },
                            {
                                value: '64',
                                label: '64G'
                            }
                        ],
                        ramValue: '',
                        // GPU
                        switchValue: false
                    },
                    // 主节点
                    nodeMianData: {
                        // cpu配置
                        cpuOptions: [
                            {
                                value: '1',
                                label: '1核'
                            },
                            {
                                value: '2',
                                label: '2核'
                            },
                            {
                                value: '4',
                                label: '4核'
                            },
                            {
                                value: '6',
                                label: '6核'
                            },
                            {
                                value: '8',
                                label: '8核'
                            },
                            {
                                value: '10',
                                label: '10核'
                            }
                        ],
                        cpuValue: '',
                        ramOptions: [
                            {
                                value: '1',
                                label: '1G'
                            },
                            {
                                value: '2',
                                label: '2G'
                            },
                            {
                                value: '4',
                                label: '4G'
                            },
                            {
                                value: '6',
                                label: '6G'
                            },
                            {
                                value: '8',
                                label: '8G'
                            },
                            {
                                value: '10',
                                label: '10G'
                            },
                            {
                                value: '12',
                                label: '12G'
                            },
                            {
                                value: '14',
                                label: '14G'
                            },
                            {
                                value: '16',
                                label: '16G'
                            },
                            {
                                value: '32',
                                label: '32G'
                            },
                            {
                                value: '48',
                                label: '48G'
                            },
                            {
                                value: '64',
                                label: '64G'
                            }
                        ],
                        ramValue: '',
                        // GPU
                        switchValue: false
                    },
                    options0: [
                    ],
                    optionsValue0: [],
                    options1: [],
                    optionsValue1: [],
                    options2: [],
                    optionsValue2: [],
                    options3: [],
                    optionsValue3: [],
                    options4: [],
                    optionsValue4: [],
                    options5: [],
                    optionsValue5: [],
                    options6: [],
                    optionsValue6: [],
                    options7: [],
                    optionsValue7: [],
                    virtualStepList: [
                        { value: 1 },
                        { value: 2 }
                    ],
                    virtualStepCurrent: 1,
                    // 镜像列表数据
                    distributionData: ''
                },

                //课程id
                courseId:'',
                //任务名称
                TaskName:'',
                //任务id
                TaskId:'',
                //实验视频搬迁
                 versionVideo:'',
                //是否允许下载
                flagDown:'',
                 //下载文件
                down:'',
                //视频Url
                videoUrl:'',
                //视频
                dialogPreviews:false,
                orderNumberStr:'',
                myVideo:'',

                //判定
                judge:'',
                judgerever:''
            }
        },
        created(){
            this.TaskName = this.$route.query.taskName;
            this.TaskId = this.$route.query.taskId;
            this.orderNumberStr = this.$route.query.orderNumberStr;
            this.courseId = this.$localstorage.getLocalStorage('setCourseId')
            this.chapterId = this.$localstorage.getLocalStorage('chapterInfoData').chapterId
            this.initvideo()
            this.init()
            this.judgeGet()
// 王天宇 星级评分 created
            //获取评分
            this.getStar();
// 王天宇 星级评分 created end
        },
        methods:{
// 王天宇 星级评分 methods
            //评分获取
            getStar(){
                let self = this;
                //url = '/tes/course/'+self.courseId+'/chapter/'+self.singleTaskId+'/resource-online?resourceType=14'
                ///tes/course/课程id/chapter/任务id/info
                self.$http.get('/tes/course/'+ self.courseId + '/chapter/' + self.TaskId + '/info').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        console.log(res,123456);
                        self.starValue = res.data.difficultyScore-0;
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //评分设置
            reqStar(value){
                let self = this;
                console.log(value);
                const loading = this.$loading({
                    lock: true,
                    text: '保存中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                //url = '/tes/course/'+self.courseId+'/chapter/'+self.singleTaskId+'/resource-online?resourceType=14'
                ///tes/course/课程id/chapter/任务id
                self.$http.post('/tes/course/'+ self.courseId + '/chapter/' + self.TaskId,{
                    "score":self.starValue
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '设置成功',
                            type: 'success'
                        })
                        loading.close()
                    }else{
                        self.$message.error(res.message)
                        loading.close()
                    }
                })
            },
// 王天宇 星级评分 methods end
             //获取实验判定
            judgeGet(){
                let self = this
                //type 多步骤2  单 1
                self.$http.get('/tes/experiment/judge/info?contextId='+self.TaskId +'&type='+1).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.judge = res.data.script
                        self.judgerever = res.data.answer
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
             //判定保存
            judgeSave(){
                let self = this
                if(self.judgerever && !self.judge ){
                    this.$message.warning('请添加判定脚本')
                    return
                }
                self.$http.post('/tes/experiment/judge/save',{
                    contextId: this.TaskId,
                    type:1,
                    script: self.judge? self.judge : '',
                    answer :self.judgerever? self.judgerever : '',
                    skipped: false


                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(!self.isshowsuccess){
                            self.$message({
                                message: '保存成功',
                                type: 'success'
                            })
                        }
                        self.isshowsuccess = false
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //视频初始化
            initvideo(){
                let self = this
                self.$http.get('/tes/course/'+ self.courseId+'/chapter/'+self.TaskId+'/make/resource?types=9').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.experimentVideo.creativeVersion.length>0){
                            self.flagDown= res.data.experimentVideo.creativeVersion[0].download
                            self.versionVideo = res.data.experimentVideo.creativeVersion[0].fileName
                            self.down = res.data.experimentVideo.creativeVersion[0].filePath
                            self.remark = res.data.experimentVideo.creativeVersion[0].remark
                            self.videoUrl = res.data.experimentVideo.displayVersion[0].filePath

                           // self.videoUrl = 'https://www.runoob.com/try/demo_source/movie.mp4'
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
             //关闭视频
            closeVideoDialog(){
                  this.$nextTick(()=>{
                    //   var myVideo = videojs('video')
                    //   myVideo.pause();
                    this.myVideo.pause()

                 })
            },
            //视频上传
            putFile($event){
                let self = this;
                let fileType = $event.target.files[0].name
                fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length) //取得后缀名
                if(fileType.toLowerCase() != 'mp4'){
                    this.$message.error('请上传mp4文件')
                    return
                }
                $('.video-img-load').show()
                $('.video-empty ').hide()
                $('.video-img').hide()
                let formData = new FormData();
                formData.append('files', $event.target.files[0]);
                self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.TaskId+'/resource-file?name=实验课学习视频&resourceType=9', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        //self.versionVideo = $event.target.files[0].name
                        $event.target.value=''
                        self.initvideo()
                        $('.video-img-load').hide()
                        $('.video-empty ').show()
                        $('.video-img').show()
                    }else{
                        $event.target.value=''
                        self.$message.error(res.message)
                    }
                })
            },
             //下载视频
            downFiles(){
                let self = this
                if(self.versionVideo!='' && self.flagDown){
                    self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.TaskId+'/resource/file-download/permission',{
                        remark :self.remark,
                        fileName : self.versionVideo
                    }) .then((response) => {
                        let res = response.data
                        if(res.code == '200'){
                            self.token=res.data
                            let downloadElement = document.createElement('a');
                            downloadElement.style.display = 'none';
                            downloadElement.href = '/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource/file-download?token='+self.token
                            downloadElement.download = self.versionVideo; //下载后文件名
                            downloadElement.click(); //点击下载
                            //document.body.removeChild(downloadElement); //下载完成移除元素
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }
            },
             //删除视频
            deleteVideo(){
                let self = this;
                self.$confirm('是否确定删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.TaskId+'/resource?resourceType=9',{
                        name:'实验课学习视频'
                    }).then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.initvideo()
                            self.versionVideo =''
                            self.videoUrl = ''
                            // window.location.reload(); 刷新好使
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                })
            },
            //视频播放
            playvideo(){
                // this.initvideo()
                // this.dialogPreviews = true
                // this.$nextTick(()=>{
                //     var audio = document.getElementById('video');
                //     audio.play();
                // })
                this.initvideo()
                let self= this
                this.dialogPreviews = true
                 this.$nextTick(()=>{
                      self.myVideo = videojs('video', {
                        bigPlayButton: true,
                        textTrackDisplay: false,
                        posterImage: false,
                        errorDisplay: false,
                        controls :true,
                        height: 400,
                        width: 400,

                        playbackRates: [0.5,1,1.5,2,3], // 倍速播放配置
                    })
                     self.myVideo.play()
                     self.myVideo.src(self.videoUrl)
                     self.myVideo.load(self.videoUrl)
                 })
            },
            //保存并提交
            submitFn(){
                let self = this
                // 实验手册
                let editorContent = this.$refs.Materials.value;
                // 实验目标
                let GoalEditContent = this.$refs.EnvironmentGoal.value;

                //  <mavonEditor id="EnvironmentGoalEdit" ref="EnvironmentGoal" class="ediator-ev"></mavonEditor>
                const loading = this.$loading({
                    lock: true,
                    text: '文件保存中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })

                let data = {}
                let url = ''
                if(self.tabPosition == 1){
                    url = '/tes/course/'+self.courseId+'/chapter/'+self.TaskId+'/resource-online?resourceType=8'
                    data = {
                        name:'实验手册',
                        content: editorContent,
                        htmlContent: self.$refs.Materials.getRender()
                    }
                }else{
                    url = '/tes/course/'+self.courseId+'/chapter/'+self.TaskId+'/resource-online?resourceType=14'
                    data = {
                        name:'实验目标',
                        content: GoalEditContent,
                        htmlContent: self.$refs.EnvironmentGoal.getRender()
                    }
                }
                self.$http.post(url,data).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        loading.close()
                        self.init()
                        self.show = false
                        self.targetShow = false
                        // self.content = ''
                        // self.TargetContent = ''
                       // window.location.reload();// 刷新好使
                    }else{
                        self.$message.error(res.message)
                        loading.close()
                    }
                })
            },
            //修改
            repeatFn(){
                let self = this
                if(self.tabPosition == 1){
                    self.show = true
                    self.targetShow = false
                }else{
                    self.targetShow = true
                    self.show = false
                }

                this.contentFn()
            },
            //获取编辑器内容
            contentFn(){
                let self = this
                self.$http.get('/tes/course/'+ self.courseId+'/chapter/'+self.TaskId+'/make/resource?types=8,14').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.laboratoryManual.creativeVersion.length>0){
                            self.$nextTick(function(){
                               self.$refs.Materials.value= res.data.laboratoryManual.creativeVersion[0].content
                            })
                        }
                        if(res.data.laboratoryTarget.creativeVersion.length>0){
                            self.$nextTick(function(){
                               self.$refs.EnvironmentGoal.value= res.data.laboratoryTarget.creativeVersion[0].content
                            })
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //手册初始
            init(){
                let self = this
                self.$http.get('/tes/course/'+ self.courseId+'/chapter/'+self.TaskId+'/make/resource?types=8,14').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.laboratoryManual.displayVersion[0]){
                           self.content = res.data.laboratoryManual.displayVersion[0].htmlContent
                           self.markHtml = res.data.laboratoryManual.displayVersion[0].htmlContent
                        }
                        if(res.data.laboratoryTarget.displayVersion[0]){
                            // 实验目标
                           self.TargetContent = res.data.laboratoryTarget.displayVersion[0].htmlContent
                           self.TargetMarkHtml = res.data.laboratoryTarget.displayVersion[0].htmlContent
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
             // 查询NoteBook镜像列表
            getImageList(is_notebook) {
                 this.$http.get('/tes/image-allocation/image?cluster=false&notebook='+is_notebook ).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        this.distributionform.options0 = res.data
                    }else{
                        this.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 选择实验类型
            experimentTypeChange(e) {
                this.distributionform.resource = 1
                this.distributionform.distributedData.cpuValue = ''
                this.distributionform.distributedData.ramValue = ''
                // this.distributionform.distributedData.switchValue = false
                this.distributionform.mirrorConfigData.cpuValue = ''
                this.distributionform.mirrorConfigData.ramValue = ''
                this.distributionform.mirrorConfigData.switchValue = false
                this.distributionform.nodeMianData.cpuValue = ''
                this.distributionform.nodeMianData.ramValue = ''
                this.distributionform.optionsValue0 = [];
                this.distributionform.optionsValue1 = [];
                this.distributionform.optionsValue2 = [];
                this.distributionform.optionsValue3 = [];
                this.distributionform.optionsValue4 = [];
                this.distributionform.optionsValue5 = [];
                this.distributionform.optionsValue6 = [];
                this.distributionform.optionsValue7 = [];
                this.distributionform.virtualStepCurrent = 1;
                this.distributionform.distributionData = '';
                let type = e==1 ? false : true;
                this.getImageList(type);
            },
            // 跳转到编辑实验镜像页
            VirtualLink() {
                let self = this
                // self.distributionform.resource = 1
                // let cluster = self.distributionform.resource == 1 ? false : true
                self.getImageList(false);
                self.$http.get('/tes/image-allocation/image?cluster=true&notebook=false' ).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.distributionform.options1 = res.data
                        self.distributionform.options2 = res.data
                        self.distributionform.options3 = res.data
                        self.distributionform.options4 = res.data
                        self.distributionform.options5 = res.data
                        self.distributionform.options6 = res.data
                        self.distributionform.options7 = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })

                // 显示分配镜像弹窗
                self.dialogDistributionFormVisible = true

                self.$http.get('/tes/image-allocation/course/'+self.courseId+'/'+self.TaskId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.allocated){
                            self.distributionform.experimentType = res.data.type;
                            //获取可视化实验单节点/notebook实验镜像列表
                            if (res.data.type == 2) {
                                self.getImageList(true);
                            }
                            if(res.data.mode == 1){
                                self.distributionform.resource = res.data.mode
                                // 伪分布取值
                                self.distributionform.distributedData.cpuValue = ""+res.data.cpu+""
                                self.distributionform.distributedData.ramValue = ""+res.data.ram+""
                                // self.distributionform.distributedData.switchValue = res.data.gpu

                                self.distributionform.optionsValue0 = [res.data.image.imageSource,res.data.image.imageId]
                                self.handleItemChange(self.distributionform.optionsValue0)
                            }else if(res.data.mode == 2){
                                self.distributionform.resource = res.data.mode
                                // 主节点取值
                                self.distributionform.nodeMianData.cpuValue = ""+res.data.cpu+""
                                self.distributionform.nodeMianData.ramValue = ""+res.data.ram+""
                                self.distributionform.nodeMianData.switchValue = res.data.gpu

                                self.distributionform.optionsValue7 = [res.data.image.imageSource,res.data.image.imageId]
                                // 从节点镜像配置
                                self.distributionform.mirrorConfigData.cpuValue = ""+res.data.slaveCpu+""
                                self.distributionform.mirrorConfigData.ramValue = ""+res.data.slaveRam+""
                                self.distributionform.mirrorConfigData.switchValue = res.data.slaveGpu
                                self.distributionform.virtualStepCurrent = res.data.slaveSize
                                self.$nextTick(() => {
                                    if(res.data.slaveSize == 1){
                                        self.distributionform.optionsValue1 = [res.data.slaveImages[0].imageSource, res.data.slaveImages[0].imageId]
                                    }else if(res.data.slaveSize == 2){
                                        self.distributionform.optionsValue1 = [res.data.slaveImages[0].imageSource, res.data.slaveImages[0].imageId]
                                        self.distributionform.optionsValue2 = [res.data.slaveImages[1].imageSource, res.data.slaveImages[1].imageId]
                                    }else if(res.data.slaveSize == 4){
                                        self.distributionform.optionsValue1 = [res.data.slaveImages[0].imageSource, res.data.slaveImages[0].imageId]
                                        self.distributionform.optionsValue2 = [res.data.slaveImages[1].imageSource, res.data.slaveImages[1].imageId]
                                        self.distributionform.optionsValue3 = [res.data.slaveImages[2].imageSource, res.data.slaveImages[2].imageId]
                                        self.distributionform.optionsValue4 = [res.data.slaveImages[3].imageSource, res.data.slaveImages[3].imageId]
                                    }else if(res.data.slaveSize == 6){
                                        self.distributionform.optionsValue1 = [res.data.slaveImages[0].imageSource, res.data.slaveImages[0].imageId]
                                        self.distributionform.optionsValue2 = [res.data.slaveImages[1].imageSource, res.data.slaveImages[1].imageId]
                                        self.distributionform.optionsValue3 = [res.data.slaveImages[2].imageSource, res.data.slaveImages[2].imageId]
                                        self.distributionform.optionsValue4 = [res.data.slaveImages[3].imageSource, res.data.slaveImages[3].imageId]
                                        self.distributionform.optionsValue5 = [res.data.slaveImages[4].imageSource, res.data.slaveImages[4].imageId]
                                        self.distributionform.optionsValue6 = [res.data.slaveImages[5].imageSource, res.data.slaveImages[5].imageId]
                                    }
                                })
                                self.handleItemChange(self.distributionform.optionsValue7)
                            }
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //弹窗step切换
            AddClass(index){
                let self = this
                // if(index != 2){
                //     return
                // }
                self.distributionform.virtualStepCurrent = index
            },
            // 分配镜像
            // 表单提交
            DistributionFormSave(formName, tag){
                // tag标记1.保存 2.保存并跳转实验镜像
                let self = this
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = {}, slaveImageIdsArr = []
                        // data.chapterIds = self.chapterId
                        data.mode = self.distributionform.resource
                        data.experimentType = self.distributionform.experimentType
                        if(self.distributionform.resource == 1){
                            data.imageId = self.distributionform.optionsValue0[1] ? self.distributionform.optionsValue0[1] : ''
                            data.cpu = self.distributionform.distributedData.cpuValue
                            data.ram = self.distributionform.distributedData.ramValue
                            // data.gpu = self.distributionform.distributedData.switchValue

                            if (data.imageId == '') {
                                self.$message.error('请选择镜像')
                                return
                            }
                        }else if(self.distributionform.resource == 2){
                            data.imageId = self.distributionform.optionsValue7[1] ? self.distributionform.optionsValue7[1] : ''
                            data.cpu = self.distributionform.nodeMianData.cpuValue
                            data.ram = self.distributionform.nodeMianData.ramValue
                            data.gpu = self.distributionform.nodeMianData.switchValue
                            data.slaveCpu = self.distributionform.mirrorConfigData.cpuValue
                            data.slaveRam = self.distributionform.mirrorConfigData.ramValue
                            data.slaveGpu = self.distributionform.mirrorConfigData.switchValue

                            if (data.imageId == '') {
                                self.$message.error('请选择主节点镜像')
                                return
                            }

                            if (self.distributionform.virtualStepCurrent == 1) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                            }else if (self.distributionform.virtualStepCurrent == 2) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
                                if (self.distributionform.optionsValue2[1] == undefined) {
                                    self.$message.error('请选择从节点2镜像')
                                    return
                                }
                            }else if (self.distributionform.virtualStepCurrent == 4) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
                                if (self.distributionform.optionsValue2[1] == undefined) {
                                    self.$message.error('请选择从节点2镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue3[1])
                                if (self.distributionform.optionsValue3[1] == undefined) {
                                    self.$message.error('请选择从节点3镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue4[1])
                                if (self.distributionform.optionsValue4[1] == undefined) {
                                    self.$message.error('请选择从节点4镜像')
                                    return
                                }
                            }else if (self.distributionform.virtualStepCurrent == 6) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
                                if (self.distributionform.optionsValue2[1] == undefined) {
                                    self.$message.error('请选择从节点2镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue3[1])
                                if (self.distributionform.optionsValue3[1] == undefined) {
                                    self.$message.error('请选择从节点3镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue4[1])
                                if (self.distributionform.optionsValue4[1] == undefined) {
                                    self.$message.error('请选择从节点4镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue5[1])
                                if (self.distributionform.optionsValue5[1] == undefined) {
                                    self.$message.error('请选择从节点5镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue6[1])
                                if (self.distributionform.optionsValue6[1] == undefined) {
                                    self.$message.error('请选择从节点6镜像')
                                    return
                                }
                            }
                            data.slaveImageIds = slaveImageIdsArr
                        }
                        self.$http.post('/tes/image-allocation/course/'+self.TaskId, data).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                if(tag == 1){
                                    self.$message({
                                        message: '镜像分配成功',
                                        type: 'success'
                                    })
                                    // 镜像分配弹窗隐藏
                                    self.dialogDistributionFormVisible = false
                                }else{
                                    self.$router.push({
                                        path: '/Teaching/MyCourses/ModifyVirtualMachine'
                                    })
                                }
                            }else{
                                self.$message.error(res.message)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                })
            },
            handleItemChange(data) {
                let self = this
                if(data[1]){
                    self.$http.get('/tes/image-allocation/image/'+data[1]).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.distributionform.distributionData = res.data
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }

            },

             // 二期 新增上传
            getFile($event) {
                let self = this

                let fileType = $event.target.files[0].name

                fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length) //取得后缀名
                if( fileType.toLowerCase() != "docx"){
                    self.$message.error('请上传docx文件')
                    return
                }
                const loading = self.$loading({
                    lock: true,
                    text: '文件上传中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                let arr = [];
                let formData = new FormData();
                formData.append('file', $event.target.files[0]);

                self.$http.post('/tes/file/word2markdown', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        loading.close()
                        self.$nextTick(function(){
                            self.$refs.Materials.value = res.data
                        })
                        $event.target.value=''
                    }else{
                        loading.close()
                        $event.target.value = ''
                        self.$message.error(res.message)
                    }
                })
            }
        }
    }
</script>


<style scoped>
    .spance{
        margin-top: 20px;
    }
     .iconBtn{
        display: flex;
        justify-content: flex-end;
    }
    .iconBtn .icon-baocun2{
        color: #4d73c0;
        font-size: 22px;
        vertical-align: text-top;
        margin-right: 25px;
        cursor: pointer;
    }
    .righs{
        text-align: right;
        margin-right: 10px;
    }
    .righs-icon{
        margin-left: 15px;
    }
    .btn-styles{
        margin-bottom: 31px;
    }
    .btnList{
        margin-top: 27px
    }
    .el-radio-group{
        /* margin-top: 20px */
    }
    .el-radio-group>>>.el-radio-button__inner{
        border: none;
        padding: 14px 14px;
        box-shadow:0 0 0  #fff;
    }
    .el-radio-group>>>.el-radio-button__orig-radio:checked+.el-radio-button__inner{
        background-color:#dcebfc;
        color: #3a8eee;
        box-shadow:0 0 0  #fff;
    }
    .iconfontlist:hover .xiaz2{
        opacity: 0.7 !important;
    }
    .blocks::-webkit-scrollbar{
        width: 5px;
        height: 5px;
    }
    .blocks::-webkit-scrollbar-thumb {
        background: #1277eb;
        border-radius:50px;
    }
    .blocks{
        overflow-y: scroll;
        max-height: 400px;
    }
    .dialog-tips>>>.el-input__inner{
        width: 220px;
    }
    .clearfix-right{
        margin-right: 10px;
    }
    .clearfix>>>.el-input__inner{
        width: 180px;
    }
     .ediator-ev>>>.v-note-wrapper {
        height: 500px;
        z-index: 1;
    }
    .ediator-ev>>>.v-note-wrapper.fullscreen{
        height: auto!important;
    }
    .ediator-ev>>>.fullscreen{
       top: 60px;
    }
     .el-textarea>>>.el-textarea__inner{
        height:190px;
        background: #fafafa;
        padding: 5px 31px 5px 22px;
    }
</style>
<style lang="scss">
    @import "./../../../styles/layout/color_variables";
    #TaskFile{
        // 分配镜像弹窗样式
        .dialog-distribution{
            .el-dialog__body{
                min-height:350px;
            }
            .el-form{
                padding: 0 50px;
                .el-dialog__body{
                    position: relative;
                }
                .el-form-item__label{
                    width: 95px;
                }
                .el-select{
                    .el-input__inner{
                        width: 80px;
                    }
                }
                .el-input__icon{
                    line-height: 32px;
                }
                .miror-item{
                    .el-form-item{
                        width: 305px;
                        .el-select{
                            margin-right: 5px;
                            .el-input__inner{
                                width: 150px;
                            }
                        }
                    }
                }
                .config-item{
                    .item-config{
                        width: 340px;
                        .el-select{
                            .el-input__inner{
                                width: 110px;
                            }
                        }
                    }
                    .item-cpu{
                        .el-form-item__error{
                            left: 95px;
                        }
                    }
                    .el-form-item{
                        width: 305px;
                        .el-select{
                            margin-right: 5px;
                        }
                        &.item-distributed{
                            width: 270px;
                            .el-select{
                                .el-input__inner{
                                    width: 180px;
                                }
                            }
                            .el-form-item__error{
                                left: 85px;
                            }
                        }
                        &.item-Gpu{
                            width: 100px;
                            .el-form-item__label{
                                width: 55px;
                            }
                        }
                    }
                }
                .form-title{
                    font-size: 16px;
                    color: #385899;
                    width: 85px;
                    margin-bottom: 15px;
                    text-align: center;
                }
                .el-select{
                    .el-input__inner{
                        width: 180px;
                    }
                }
                .el-cascader{
                    line-height: 32px;
                }
                .item-node{
                    .el-form-item{
                        display: inline-block;
                        width: 330px;
                    }
                }
            }
            .el-dialog__footer{
                text-align: center;
            }
            .button-style{
                min-width: 90px;
            }
            .el-radio-group{
                .el-radio__inner{
                    border-color: #DCDFE6;
                }
                .el-radio{
                    width: 80px;
                }
            }
            .virtual-step{
                width: 188px;
                border-bottom: solid 3px #dfdfdf;
                margin-top: 15px;
                margin-left: 80px;
                ul{
                    li{
                        float: left;
                        width: 19px;
                        height: 19px;
                        line-height: 19px;
                        color: #fff;
                        font-size: 12px;
                        text-align: center;
                        border-radius: 10px;
                        margin: -9px 0 0 0;
                        background: #d9d9d9;
                        cursor: pointer;
                        &.active-disabled{
                            cursor:not-allowed;
                        }
                        &:first-child{
                            margin-left: 10%;
                        }
                        &:nth-child(2){
                            margin-left: 29%;
                        }
                        &:last-child{
                            margin-left: 31%;
                        }
                        &.active{
                            background: #1277eb;
                        }
                    }
                }
            }
            .distribution-item{
                width: 208px;
                height: 280px;
                border: solid 1px #e8e8e8;
                border-radius: 4px;
                position: absolute;
                right: 55px;
                top: 95px;
                .jx-course-box{
                    margin-top: 25px;
                    text-align: center;
                    img{
                        width: 155px;
                    }
                    span{
                        display: block;
                        font-size: 14px;
                        color: $title-gray;
                        margin-top: 10px;
                    }
                }
                .jx-course-icon{
                    position: absolute;
                    right: 18px;
                    top: -5px;
                }
                .jx-course-text{
                    margin-top: 10px;
                    margin: 10px 24px 0;
                    height: 145px;
                    overflow-y: scroll;
                    font-size: 12px;
                    line-height: 16px;
                    color: $table-gray;
                    word-wrap: break-word;
                    &::-webkit-scrollbar {
                        width: 2px;
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #6c6c6c;
                    }
                }
            }
        }
        // .el-cascader-menu{
        //     height: auto;
        // }
    }
</style>
<style scoped lang="scss">
 @import "./../../../styles/layout/color_variables";
 #TaskFile{
      // 分配镜像弹窗样式
    margin-top: 0px !important;
    position: relative;
    .taskTitle{
        border-bottom: 1px solid #e6e6e6;
        padding-bottom:12px;
        font-size: 16px;
    }
    .ediator{
        clear: both;
        // padding-top: 15px;
        position: relative;
        z-index: 1;
    }
    .btn-center{
        text-align: center;
        padding: 20px 0;
    }
    .iframse{
        clear: both;
        padding-top: 26px;
        width: 1120px;
        padding-left: 15px;
        &::-webkit-scrollbar {
            width: 5px;
        }

        &::-webkit-scrollbar-thumb {
            background: #c1c1c1;
        }
        .markdown-body{
            padding: 0;
        }
    }
    .virtual-position{
        position: fixed;
        right: 90px;
        bottom: 120px;
        cursor: pointer;
        z-index: 10;
        &:hover{
            transform: rotate(360deg);
            transition: .5s;
        }
    }
    //专科版本
    .dialogSortul li>p{
        line-height: 28px;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    //专科版本视频
    .uploadBtns{
        position: relative;
        margin-top: 35px;
        .uploadBtns-file{
            margin: 8px 0;
            color: #cacaca;
        }

    }
    #version-files{
        position: absolute;
        left: 0;
        opacity: 0;
        height: 130px;
        top: -35px;
        width: 220px;
        cursor: pointer;
    }
    .video{
        width: 1200px;
        margin: 10px auto;
    }
    .video-empty{
        border: 1px dashed #b0b0b0;
        width: 220px;
        height: 130px;
        line-height: 130px;
        text-align: center;
        cursor: pointer;
        position: relative;
        border-radius: 6px;
        margin-left: 30px;
        margin-bottom: 40px;
    }
    .video-img{
         cursor: pointer;
         position: relative;
         background: url('../../../assets/images/defalut.png') no-repeat;
         width: 220px;
         height: 130px;
         margin-bottom: 30px;
         margin-left: 30px;
    }
    .video-img-load{
         cursor: pointer;
         position: relative;
         background: url('../../../assets/images/defalut.png') no-repeat;
         width: 220px;
         height: 130px;
        //  margin-bottom: 30px;
         margin-left: 30px;
         color: #fff;
        text-align: center;
        padding-top: 45px;
        display: none
    }
    .video-img>img{
        width: 200px;
        height: 100px;
        line-height: 100px;

    }
    .iconpost{
        padding: 45px 20px 10px 20px;
        color: #fff;
    }
    .iconpost .filename{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 180px;
        text-align: center
    }
    .icon-tubiaozhizuo-{
        color: #385899;
        font-size: 20px;
        vertical-align: bottom;
        cursor: pointer;
    }
    .icon-shangchuan-{
        margin-right: 3px;
        font-size: 15px;
    }
    .el-icon-search{
        margin-right: 3px;
    }
    .icon-icon_edit{
       font-size: 14px;
        margin-right: 14px;
        margin-top: 32px;
        display: block
    }
    .iconfontlist{
        text-align: center;
        margin-top: 12px;
        i{
            background: #fff;
            opacity: 0.7;
            border-radius: 50%;
            width: 19px;
            height: 19px;
            display: inline-block;
            padding: 4px;
            text-align: center;
            color: #000;
            margin-right: 3px;
            &:hover{
                opacity: 1;
            }

        }
        #versionFile{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 27px;
            height: 27px;
            opacity: 0;
        }
        .icon-shangchuan{
            position: relative;
        }
        .icon-Group-{
            font-weight: 600;
        }

    }
    #video{
        width: 100%;
    }
    .icon-baocun2{
        color: #385899;
        font-size: 22px;
        vertical-align: text-top;
        margin-left: 5px;
        cursor: pointer;

    }
    .right-icon{
        margin-right: 20px;
    }
    .icon-icon_edit{
        color: #385899;
        font-size: 22px;
        cursor: pointer;
    }

    //由于冲突时添加的
    //word版本上传样式
    .upload-btn{
        // position: relative;
        span{
            &.word-upload{
                position: relative;
                float: left;
                width: 28px;
                height: 28px;
                overflow: hidden;
                margin-right: 10px;
            }
        }
        .icon-tubiaozhizuomoban2{
            font-size: 30px;
            color: #385899;
            vertical-align:-6px;
        }
    }
     #upload-file-input{
        position: absolute;
        left: 0;
        opacity: 0;
        height: 30px;
        top: 0px;
        width: 24px;
        cursor: pointer;
    }
 }
</style>
<!-- 王天宇 星级评分 css -->
<style lang="scss">
    .d-star-box{
        display:flex;
        align-items: center;
        margin-bottom:20px;
    }
</style>
<!-- 王天宇 星级评分 css end -->
